<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>酒店信息</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css"/>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <script src="/js/plugins/dialog/dialog.min.js"></script>
    <script src="/js/common.js"></script>

</head>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
        </div>
    </div>
</div>

<div class="hotels">
    <img  class="cover" render-src="coverUrl">
    <div class="container">
        <h3 class="name" render-html="name"></h3>
    </div>
    <div class="container">
        <fieldset>
            <legend>酒店信息</legend>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-calendar"></i> 酒店名字 <span render-html="name"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-money"></i> 状态
                    <span render-html="stateName"></span>
                </div>
            </div>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-user-circle"></i> 地点
                    <span render-html="place.name"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-clock-o"></i> 酒店类型
                    <span render-html="hotel.name"></span>
                </div>
            </div>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-user-circle"></i> 酒店推荐指数:
                    <span render-html="typeName"></span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-clock-o"></i> 平均价格:
                    <span render-html="price"></span>
                </div>
            </div>
        </fieldset>

        <div class="content" render-html="hotelContent.content">
        </div>
    </div>
    <div class="row nav-box">
        <div class="col" style="background-color: #DFE823;" align="center">
            <a href="collection.html"><i class="fa fa-save fa-fw"></i> 收藏</a>
        </div>
        <div class="col" style="background-color: #7281D5;" align="center">
            <!--动态渲染a标签-->
            <a render-key="id" render-fun="handle"><i class="fa fa-send fa-fw"></i> 预定</a>
        </div>
    </div>
    <hr>
    <div class="container d-flex">
        <div class="p-2  flex-fill">
            <i class="fa fa-thumbs-o-up"  id="likeBtn"> </i>
        </div>
        <div class="p-2  flex-fill"><i class="fa  fa-commenting-o"  id="commentBtn"> </i>
        </div>
        <div class="p-2  flex-fill"><i class="fa fa-star-o" id="collectBtn"> </i>
        </div>
    </div>
</div>
    <script>
        $(function () {
            var user = JSON.parse(sessionStorage.getItem("user"));
            var id = getParams().id;
            if(id){
                $.get("/hotels/catalogs/" + id,function (data) {
                    console.log(data);
                    $(".hotels").renderValues(data,{
                        handle:function (ele,value) {
                            if(user==null){
                                $(document).dialog({
                                    type : 'confirm',
                                    titleText: '亲,您还没有登录',
                                    buttons: [
                                        {
                                            name: '立即登录',
                                            callback: function() {
                                                window.location.href = "/index.html";
                                            }
                                        }
                                    ]
                                });


                            }
                            $(ele).attr("href","/hotelIndent.html?id=" + value);
                        }
                    });
                });
            }
        })
    </script>
</body>
</html>